<template>
  <!-- sync
         父子传值
            父传子
               子组件标签  :xxx.sync="fatherXxx"    
                    父组件内设置   fatherXxx=值
               子组件内:  
                  props:['xxx']
                  this.$emit('update:xxx',修改后的值)
     v-model
 -->
  <el-dialog :visible="isShow" title="分配角色" @close="closeEvent">
    <template>
      <el-checkbox-group v-model="selectRole">
        <!-- el-checkbox
                label:值         
            
             -->
        <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <div style="marginTop:20px;text-align:center">
        <el-button @click="closeEvent">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- dialog上加了sync:dialog组件内修改它visible可以通过this.$emit('update:visible' ,) -->
</template>
<script>
import { sysRole } from '@/api/settings'
import { sysUser } from '@/api/user'
import { sysUserAsignRolesPut } from '@/api/employees'
export default {
  props: ['isShow'],
  data () {
    return {
      list: [],
      selectRole: [],
      id: '' // 当前用户id
    }
  },
  created () {
    this.getData()
  },
  methods: {
    closeEvent () {
      this.$emit('update:isShow', false)
      this.selectRole = []
    },
    // 获取角色列表
    async getData () {
      const res = await sysRole({ pagesize: 100 })
      this.list = res.rows
      window.console.log(res)
    },
    // 获取当前用户角色信息
    async getRoleInfo (id) {
      this.id = id
      const { roleIds } = await sysUser(id)
      this.selectRole = roleIds
      //   window.console.log(res)
    },
    // 确定点击
    async submit () {
      await sysUserAsignRolesPut({
        id: this.id,
        roleIds: this.selectRole
      })
      // 1：提示  2：关闭弹窗  3：清空表单数据selectRole=[]
      this.$message.success('分配角色成功')
      this.closeEvent()
    }
  }
}
</script>
<style></style>
